<!--
 * @Descripttion: 日历价格弹窗
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-19 15:47:59
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-05-05 14:39:40
-->
<template>
  <div>
    <KiFormDialog
      :show.sync="formDialog.show"
      title="日历价格"
      v-model="formDialog.data"
      :readonly="true"
      @close="$emit('change')"
    >
      <div class="form-dialog" v-loading="formDialog.loading">
        <div class="btn-area">
          <el-button
            type="primary"
            icon="el-icon-s-tools"
            @click="handleBatchPrice"
            v-if="formDialog.status=='u'"
          >
            批量设置
          </el-button>
        </div>
        <el-calendar v-model="calendarValue" v-if="formDialog.show">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ date, data }">
            <div
              :class="
                data.isSelected ? 'calendar-cell is-selected' : 'calendar-cell'
              "
              v-if="formDialog.data"
              @click="
                handleCalendarCellTap({
                  date,
                  data,
                  oData: formDialog.data[data.day],
                  fdData: formDialog.data,
                  fdQuery: formDialog.query,
                })
              "
            >
              <div
                :class="
                  data.type == 'current-month'
                    ? 'calendar-content'
                    : 'calendar-content disabled'
                "
              >
                <p>{{ data.day.split("-")[2] }}</p>
                <div v-if="formDialog.data[data.day]">
                  <div class="price ct">
                    ¥
                    <span class="wa">{{
                      formDialog.data[data.day].salePrice | $cent2yuan
                    }}</span>
                  </div>
                  <div class="status ct">
                    <!-- <template v-if="formDialog.data[data.day].inventory > 0">
                      余{{ formDialog.data[data.day].inventory }}
                    </template> -->
                    <template v-if="formDialog.data[data.day].roomStatus">
                     {{ formDialog.data[data.day].roomStatus }}
                    </template>
                    <template v-else></template>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </KiFormDialog>

    <!-- 批量价格设置弹框 -->
    <batchPriceDialog
      :form="batchPriceTarget"
      ref="batchPriceDialogNode"
      @change="refresh(calendarValue)"
    >
    </batchPriceDialog>

    <!-- 单日价格设置弹框 -->
    <singlePriceDialog
      :form="singlePriceTarget"
      @change="refresh(calendarValue)"
    >
    </singlePriceDialog>
  </div>
</template>

<script>
import batchPriceDialog from "./batchPrice";
import singlePriceDialog from "./singlePrice";
export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          query: null,
          data: null,
          status : null
        };
      },
    },
  },
  components: {
    batchPriceDialog,
    singlePriceDialog,
  },
  data() {
    return {
      formDialog: this.form,
      // 日历数据的值
      calendarValue: null,
      // 批量价格设置弹框
      batchPriceTarget: {
        show: false,
        data: null,
      },
      // 单日价格设置弹框
      singlePriceTarget: {
        show: false,
        data: null,
      },
    };
  },
  watch: {
    // 日历弹框关闭时，清除日历弹框的值，避免再次打开日历弹框值残留到上次所在的月份
    // 结合 <el-calendar v-model="calendarValue" v-if="formDialog.show">  才能生效
    "formDialog.show": {
      handler(nv, ov) {
        if (!nv && ov) {
          this.$set(this.formDialog, "data", null);
          this.$set(this.formDialog, "query", null);
          this.calendarValue = null;
        }
      },
      immediate: true,
      deep: true,
    },
    "formDialog.query": {
      handler(nv) {
        if (nv) {
          this.init(nv);
        }
      },
      immediate: true,
      deep: true,
    },
    calendarValue: {
      handler(nv) {
        if (nv) {
          // this.request(
          //   this.formDialog.query,
          //   this.getStartDate(nv),
          //   this.getEndDate(nv)
          // );
          this.refresh(nv);
        }
      },
      deep: true,
    },
  },
  methods: {
    /**
     * @param {*} query
     * @return Void
     */
    init(query) {
      this.request(query, this.getStartDate(), this.getEndDate());
    },
    /**
     * 刷新页面数据
     * @param {*} calendarValue
     * @return Void
     */
    refresh(calendarValue) {
      this.request(
        this.formDialog.query,
        this.getStartDate(calendarValue),
        this.getEndDate(calendarValue)
      );
    },
    request(query, beginDate, endDate) {
      this.$set(this.formDialog, "loading", true);
      this.$POST('sot-admin-api/hotel/self-room-price/queryForDailyPrices', {
        beginDate,
        endDate,
        roomId: query.roomId,
        hotelId: query.hotelId,
      }).then( res => {
        this.$set(this.formDialog, "data", this.formatDateDate(res.data));
      })
      .finally(() => {
        this.$set(this.formDialog, "loading", false);
      });
    },
    /**
     * 将数组格式化为key是日期的对象
     * @param {Array} arr
     * @return {Object}
     */
    formatDateDate(arr) {
      if (arr && arr instanceof Array && arr.length > 0) {
        let obj = {};
        arr.forEach((its) => {
          if (its.priceDate) {
            obj[its.priceDate] = its;
          }
        });
        return obj;
      } else {
        return {};
      }
    },
    /**
     * 获取指定时间的日期,格式为'年-月-日'
     * @param {Date} time 指定日期
     * @return {String}
     */
    getNewDate(time) {
      let date = time ? time : new Date();
      let transverse = "-";
      let Verticalpoint = ":";
      let month = date.getMonth() + 1; //获取月份
      let strDate = date.getDate(); //获取具体的日期
      //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
      //如果是则在前面加“0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 1 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      return date.getFullYear() + transverse + month + transverse + strDate;
    },
    /**
     * 获取开始日期,用于排班接口参数
     * @param {Date} dt 指定日期
     * @return {String}
     */
    getStartDate(dt) {
      let date = dt ? this.getNewDate(dt) : this.getNewDate();
      let month = parseInt(date.substr(5, 2));
      let year = parseInt(date.substr(0, 4));
      if (month == 1) {
        return String(year - 1) + "-12-01";
      } else if (month == 12) {
        return String(year) + "-11-01";
      } else {
        let _month = month - 1;
        _month = _month > 9 ? String(_month) : "0" + String(_month);
        return String(year) + "-" + _month + "-01";
      }
    },
    /**
     * 获取结束日期，用于排班接口参数
     * @param {Date} dt 指定日期
     * @return {String}
     */
    getEndDate(dt) {
      let date = dt ? this.getNewDate(dt) : this.getNewDate();
      let month = parseInt(date.substr(5, 2));
      let year = parseInt(date.substr(0, 4));
      if (month == 12) {
        return String(year + 1) + "-01-31";
      } else {
        let _month = month + 1;
        _month = _month > 9 ? String(_month) : "0" + String(_month);
        return String(year) + "-" + _month + "-28";
      }
    },
    /**
     * 点击批量设置按钮
     * @param {Object} row
     * @return Void
     */
    handleBatchPrice() {
      this.$set(this.batchPriceTarget, "data", this.form.query);
      this.$set(this.batchPriceTarget, "show", true);
    },
    /**
     * 点击日历单元格
     * @param {Object} cf
     * @return Void
     */
    handleCalendarCellTap(cf) {
      if(this.formDialog.status=='r')
        return false
      let currentDay= Number(this.$dayjs(cf.data.day).format('YYYYMMDD') )
      let now=Number(this.$dayjs().format('YYYYMMDD') )
      if(currentDay<now){
        this.$swal.error("请选择设置当日及以后日期的价格")
        return false
      }
      this.$set(this.singlePriceTarget, "data", cf);
      this.$set(this.singlePriceTarget, "show", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  &:deep(.el-calendar-table) {
    .el-calendar-day {
      height: auto !important;
      padding: 0;
      display: flex;
      .calendar-cell {
        min-height: 68px;
        flex: 1;
      }
      .calendar-content {
        padding: 4px;
        height: 100%;
        &.disabled {
          background-color: rgba(247, 251, 229, 0.48);
        }
      }
      p {
        text-align: right;
        margin: 0 4px 4px;
        font-size: 12px;
      }
      .ct {
        text-align: center;
      }
      .wa {
        color: #e6a23c;
      }
      .price {
        text-align: center;
        font-size: 16px;
        margin-bottom: 4px;
      }
      .status {
        font-size: 13px;
      }
    }
  }
  .btn-area {
    text-align: right;
    padding: 0 20px;
  }
}
</style>
